import 'package:flutter/material.dart';
import '../../../core/platform/platform_detector.dart';

/// 可折叠侧边栏导航组件
class CollapsibleSidebar extends StatefulWidget {
  final int selectedIndex;
  final ValueChanged<int> onDestinationSelected;
  final List<NavigationDestination> destinations;
  final List<Widget> pages;

  const CollapsibleSidebar({
    super.key,
    required this.selectedIndex,
    required this.onDestinationSelected,
    required this.destinations,
    required this.pages,
  });

  @override
  State<CollapsibleSidebar> createState() => _CollapsibleSidebarState();
}

class _CollapsibleSidebarState extends State<CollapsibleSidebar> {
  bool _isCollapsed = false;

  @override
  Widget build(BuildContext context) {
    // 桌面和Web平台使用侧边栏导航
    if (PlatformDetector.isDesktop() || PlatformDetector.isWeb()) {
      return Row(
        children: [
          // 可折叠侧边栏导航
          _buildCollapsibleSidebar(context),
          // 内容区域
          Expanded(
            child: widget.pages[widget.selectedIndex],
          ),
        ],
      );
    } else {
      // 移动平台使用底部导航栏
      return Scaffold(
        body: widget.pages[widget.selectedIndex],
        bottomNavigationBar: NavigationBar(
          selectedIndex: widget.selectedIndex,
          onDestinationSelected: widget.onDestinationSelected,
          destinations: widget.destinations,
        ),
      );
    }
  }

  Widget _buildCollapsibleSidebar(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据屏幕宽度自动决定是否折叠
        final shouldAutoCollapse = constraints.maxWidth < 1200;
        final isActuallyCollapsed = shouldAutoCollapse || _isCollapsed;

        return Container(
          width: isActuallyCollapsed ? 60 : 200, // 简化宽度
          decoration: BoxDecoration(
            color: Theme.of(context).cardColor,
            border: Border(
              right: BorderSide(
                color: Theme.of(context).dividerColor,
                width: 0.5,
              ),
            ),
          ),
          child: Column(
            children: [
              // 简化Logo区域和折叠按钮
              Container(
                padding: const EdgeInsets.all(12),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 添加这行以确保元素合理分布
                  children: [
                    Container(
                      width: 30,
                      height: 30,
                      decoration: BoxDecoration(
                        color: Theme.of(context).primaryColor,
                        borderRadius: BorderRadius.circular(6),
                      ),
                      child: const Icon(
                        Icons.dashboard, // 使用标准的仪表板图标
                        color: Colors.white,
                        size: 18,
                      ),
                    ),
                    if (!isActuallyCollapsed) ...[
                      const SizedBox(width: 10),
                      Expanded(
                        child: Text(
                          '需求管理平台',
                          style:
                              Theme.of(context).textTheme.titleSmall?.copyWith(
                                    fontWeight: FontWeight.bold,
                                    color: Theme.of(context).primaryColor,
                                  ),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                    // 标准化折叠按钮
                    IconButton(
                      icon: Icon(
                        isActuallyCollapsed
                            ? Icons.arrow_forward // 使用标准的箭头图标
                            : Icons.arrow_back, // 使用标准的箭头图标
                        size: 18,
                      ),
                      onPressed: () {
                        setState(() {
                          _isCollapsed = !_isCollapsed; // 修复折叠状态切换逻辑
                        });
                      },
                      padding: EdgeInsets.zero,
                      constraints: const BoxConstraints(
                        minWidth: 30,
                        minHeight: 30,
                      ),
                    ),
                  ],
                ),
              ),
              const Divider(height: 1),
              // 导航项
              Expanded(
                child: ListView.builder(
                  itemCount: widget.destinations.length,
                  itemBuilder: (context, index) {
                    return _buildSidebarItem(
                        context, index, isActuallyCollapsed);
                  },
                ),
              ),
              // 底部设置入口
              if (!isActuallyCollapsed) ...[
                const Divider(height: 1),
                _buildSettingsItem(context),
              ],
            ],
          ),
        );
      },
    );
  }

  Widget _buildSidebarItem(BuildContext context, int index, bool isCollapsed) {
    final isSelected = index == widget.selectedIndex;

    // 获取NavigationDestination中的图标和标签
    final destination = widget.destinations[index];

    return ListTile(
      leading: IconTheme(
        data: IconThemeData(
          color: isSelected ? Theme.of(context).primaryColor : null,
          size: 20,
        ),
        child: destination.icon,
      ),
      title: isCollapsed
          ? null // 折叠时隐藏标题
          : Text(
              destination.label,
              style: TextStyle(
                color: isSelected ? Theme.of(context).primaryColor : null,
                fontSize: 14,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
              ),
            ),
      selected: isSelected,
      onTap: () => widget.onDestinationSelected(index),
      selectedTileColor: isSelected
          ? Theme.of(context).primaryColor.withValues(alpha: 0.1)
          : null,
      visualDensity: VisualDensity.compact, // 使用紧凑布局
      contentPadding: EdgeInsets.only(
        left: isCollapsed ? 12 : 16,
        right: 8,
      ),
    );
  }

  // 构建底部设置项
  Widget _buildSettingsItem(BuildContext context) {
    return ListTile(
      leading: const Icon(
        Icons.settings,
        size: 20,
      ),
      title: const Text(
        '设置',
        style: TextStyle(
          fontSize: 14,
        ),
      ),
      onTap: () {
        // 导航到设置页面的逻辑可以在这里添加
      },
      visualDensity: VisualDensity.compact,
      contentPadding: const EdgeInsets.only(left: 16, right: 8),
    );
  }
}